<script setup lang="js">
import { onMounted, ref } from 'vue';
import MessageInput from './message-input/MessageInput.vue';
import MessageScroll from './message-scroll/MessageScroll.vue';
import ModelCards from './model-cards/ModelCards.vue';

const modelCardsRef = ref()
const modelCardsHeight = ref(0)

onMounted(()=>{
    if (modelCardsRef.value) {
        modelCardsHeight.value = modelCardsRef.value.offsetHeight;
    }
})
</script>

<template>
    <el-container class="container">
        <el-aside class="aside"></el-aside>
        <el-main class="main">
            <div class="message-container">
                <div class="message-list">
                    <MessageScroll :bottomPadding="modelCardsHeight"/>
                </div>
                <div ref="modelCardsRef" class="model-cards">
                    <ModelCards />
                </div>
            </div>
            <div ref="msgInputRef" class="message-input">
                <MessageInput/>
            </div>
        </el-main>
        <el-aside class="aside"></el-aside>
    </el-container>
</template>

<style lang="css" scoped>
.container {
    display: flex;
    flex-direction: row;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: auto;
}

.main {
    display: flex;
    flex-direction: column;
    width: 600px;
    max-width: 600px;
    height: 100vh;
    flex-shrink: 0;
}

.aside {
    flex: 1;
    min-width: 300px;
}

.message-container {
    flex: 1;
    min-height: 0px;
    position: relative;
}

.message-list {
    position: absolute;
    min-height: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.model-cards {
    position: absolute;
    bottom: 0px;
    padding: 3px;
    z-index: 2;
    width: 100%;
    overflow-x: auto;
}

.message-input {
    padding: 3px;
}
</style>